<template>
  <div class="bg">

<div class="wrapper">
  <staticPart/>
</div>
  <mostSell/>
<doucker :choossIndex="0"/>
  </div>
   <van-sticky offset-bottom="10vh" position="bottom" v-show="show" class="goToTop">
       <div class="top" @click="goToTop"><van-icon name="back-top" size="1.5rem" /></div> 
</van-sticky>
</template>
<script>
// export default{
//     name:"home"
// }
</script>
<script setup>

import mostSell from './components/mostSell.vue'
import staticPart from './components/steaticPart.vue'
import doucker from "../../components/doucker.vue";
import { ref,nextTick,onMounted } from "vue";
import { throttle } from "../../utils/index";
const show=ref(false)

const showBtn=(scrollTop)=>{
      console.log(scrollTop);
}


const handle=()=>{

}

onMounted(() => {
  

  const handle = () => {
    let scrollTop = document.documentElement.scrollTop;
    let {clientHeight} = document.documentElement;
    let scrollHeight = document.documentElement.scrollHeight;
  
    // console.log(scrollTop);//滚动条的距离  =内容被卷的高度
    //   console.log(clientHeight);// 元素在浏览器的高度
    // console.log(scrollHeight);// box的高度
      if(scrollTop>=clientHeight){
        show.value=true
      }else{
        
      }
  };
  window.addEventListener("scroll", throttle(handle, 100));
});
const goToTop=()=>{
 window.scrollTo(0,0);
}
</script>

<style lang="scss" scoped>
.bg{
width: 100%;
background-color: #F9F9F9 ;
.wrapper{
  background-color: white;
}
  
}
.goToTop{
float: right;
margin-right: 3vw;

}
.top{
  background-color: #ddd9d9;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 99;
}
</style>